<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>流程管理 - 下一步</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/lib/layui/css/layui.css" media="all" />
	<script src="/lib/layui/layui.js" charset="utf-8"></script>
	<script src="/static/js/main.js"></script>
	<script src="/lib/jquery/jquery.js"></script>
	<style type="text/css">
        table{
        	width: 100%;
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th{
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th{
            background-color: #CCE8EB;
            /*width: 100px;*/
        }
        table tr:nth-child(odd){
            background: #fff;
        }
        table tr:nth-child(even){
            background: #F5FAFA;
        }
 
    </style>


</head>
<body >
	<table id="table" style="border-width: 1px;border-color: black ">
		<tr>
			<th><input type="checkbox"></th>
			<th>任务名称</th>
			<th>任务分配人</th>
		</tr>
	</table>
</body>





<script type="text/javascript">


	layui.use(['configureCom','allHeight','element','form'], function () {});
	
	function initNext(){
		var html ="";
		parent.processOutputCtx.activities.forEach(function(activiti){
			var userIds = "";
			var userNames = "";
			activiti.participants.forEach(function(participant){
				userNames+= ","+participant.name;
				userIds+=","+participant.id;
			});
			userIds = userIds!=""?userIds.substring(1):"";
			userNames = userNames!=""?userNames.substring(1):"";


			html += "<tr>";
			//html += "<td><input type='checkbox' checked class='activiti' name='"+activiti.id+"' value='"+userIds+"'></td>";
			//html += "<td><input type='checkbox' checked class='activiti' name='"+activiti.id+"' value='"+userIds+"'></td>";
			html += "<td><input type='checkbox' checked class='activiti' name='"+activiti.id+"' value='"+userIds+"'></td>";
			html += "<td>"+activiti.name+"</td>";
			html += "<td>";
			html += "<input style='width:100%;height:100%;' id='"+activiti.id+"' readonly type='text' value='"+userNames+"' onclick='selectParticipant(\""+activiti.id+"\")'/>";
			html += "</td>"
			html += "</tr>";
		});
		$("#table").append(html);
	}

	var userIdsElement;
	var userNamesElement; 
	function selectParticipant(activitiDefId){
		userIdsElement = $("input[name='"+activitiDefId+"']");
		userNamesElement = $("#"+activitiDefId);

		//弹出选人框
		layer.open({
	        type: 2 //此处以iframe举例
	        ,title: '选人框：'
	        ,area: ['800px', '600px']
	        ,shade: 0
	        ,maxmin: true
	        ,content: "/templates/act/selectParticipant.html"
	        ,btn: ['提交']
	        ,yes: function(){
				set();
	        }
	        ,zIndex: layer.zIndex
	    });
		
	}



	parent.getParticipantsVariables = function(){
		var a = $(".activiti");
		var variables = [];
		for(var i=0;i<a.length;i++){
			variables.push({
				name:a[i].name,   						// taskDefKey
				value:a[i].checked?a[i].value:'false'	// 对应的人员的ID
			});
		}
		return variables;
	}


</script>
<script type="text/javascript">
	initNext()
</script>
</html>